<template>
  <div class="body">
    <div id="login_box" v-loading="loading" element-loading-text="正在登录...">
      <h2>小七</h2>
      <div id="input_box">
        <input type="text" v-model="username" placeholder="请输入用户名">
      </div>
      <div class="input_box">
        <input type="password" v-model="password" placeholder="请输入密码">
      </div>
      <button @click="login">登录</button>
      <br>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {ElNotification} from "element-plus";
import router from "@/router/index.js";
import * as user from "@/api/user.js";

const username = ref('')
const password = ref('')
const loading = ref(false)

// 获取 token
const tokenString = localStorage.getItem('token');

// 检测 token 是否存在
if (tokenString) {
  try {
    const token = JSON.parse(tokenString);
    ElNotification({
      title: '登录成功',
      message: '欢迎回来，' + token.user.nickname,
      type: 'success',
    })
    const activeMenuIndex = ref(localStorage.getItem('activeMenuIndex'))
    switch (activeMenuIndex.value) {
      case '1':
        router.push('/home')
        break;
      case '2':
        router.push('/user')
        break;
      case '3':
        router.push('/photo')
        break;
      case '4':
        router.push('/setting')
        break;
      default:
        router.push('/home')
        break;
    }
  } catch (error) {
    ElNotification({
      title: '登录失败',
      message: 'Token 解析失败，请重新登录',
      type: 'error',
    })
  }
}

const login = async () => {
  loading.value = true
  const data = {
    username: username.value,
    password: password.value
  }
  const res = await user.login(data)
  if (res.code !== 200) {
    ElNotification({
      title: '登录失败',
      message: '用户名或密码错误！',
      type: 'error',
    })
    loading.value = false
    return;
  }
  // 获取用户信息
  const userInfo = await user.userInfo(res.data)
  if (userInfo.code !== 200) {
    ElNotification({
      title: '登录失败',
      message: '获取用户信息失败！',
      type: 'error',
    })
    loading.value = false
    return;
  }
  localStorage.setItem('token', JSON.stringify(userInfo.data))
  await router.push('/home')
  loading.value = false
}

</script>

<style scoped>
.body {
  background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
  background-size: 100% 130%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

#login_box {
  width: 20%;
  height: 400px;
  background-color: #00000060;
  margin: 10% auto auto;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
}

h2 {
  color: #ffffff90;
  margin-top: 5%;
}

#input-box {
  margin-top: 5%;
}

span {
  color: #fff;
}

input {
  border: 0;
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  outline: none;
  margin-top: 10px;
}

button {
  margin-top: 50px;
  width: 60%;
  height: 30px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #330867);
}

#sign_up {
  margin-top: 45%;
  margin-left: 60%;
}

a {
  color: #b94648;
}

.example-showcase .el-loading-mask {
  z-index: 999;
}
</style>
